<template>
	<gesture-back>
		<view class="page-container" :class="{'no-scroll': showInputPanel}">
			<view class="article-section">
				<view class="article-header">
					<view class="article-title">{{ articleData.title }}</view>
					<view class="article-meta">
						<view class="article-source">
							<image :src="articleData.source_icon" class="source-icon"></image>
							<text class="source-name">{{ articleData.source }}</text>
						</view>
						<text class="article-time">{{ formatTime(articleData.create_time) }}</text>
					</view>
				</view>
				<view class="article-content">
					<rich-text :nodes="articleData.content"></rich-text>
				</view>
			</view>
			
			<comments 
				:initialComments="comments" 
				@comment-added="handleCommentAdded" 
				@reply-added="handleReplyAdded" 
				@like-changed="handleLikeChanged"
				@input-panel-change="handleInputPanelChange"
			/>
		</view>
	</gesture-back>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import Comments from '../../../components/common-comments/index.vue'
import GestureBack from '../../../components/gesture-back/index.vue'
const articleData = ref({})

const comments = ref([])

const showInputPanel = ref(false)

const formatTime = (timestamp) => {
	if (!timestamp) return '刚刚'
	
	const now = Date.now()
	const diff = now - timestamp
	
	if (diff < 60 * 1000) {
		return '刚刚'
	}
	
	if (diff < 60 * 60 * 1000) {
		return `${Math.floor(diff / (60 * 1000))}分钟前`
	}
	
	if (diff < 24 * 60 * 60 * 1000) {
		return `${Math.floor(diff / (60 * 60 * 1000))}小时前`
	}
	
	if (diff < 7 * 24 * 60 * 60 * 1000) {
		return `${Math.floor(diff / (24 * 60 * 60 * 1000))}天前`
	}
	
	const date = new Date(timestamp)
	return `${date.getMonth() + 1}月${date.getDate()}日`
}

const handleCommentAdded = (comment) => {
	console.log('新评论:', comment)
}

const handleReplyAdded = (reply, commentIndex, replyIndex) => {
	console.log('新回复:', reply, '评论索引:', commentIndex, '回复索引:', replyIndex)
}
const handleLikeChanged = (item, commentIndex, replyIndex) => {
	console.log('点赞状态变化:', item, commentIndex, replyIndex)
}

const handleInputPanelChange = (isShow) => {
	showInputPanel.value = isShow
}

const fetchArticleData = (id) => {
	setTimeout(() => {
		articleData.value = {
			id: id,
			title: '人工智能革命：未来已来，引领新科技时代',
			category: '前沿科技',
			source: '科技前沿',
			source_icon:"/static/logo.png",
			cover: "/static/logo.png",
			create_time: Date.now() - 3 * 60 * 60 * 1000,
			content: `
				<p style="font-size: 18px; line-height: 1.8; color: #333; margin-bottom: 20px;">人工智能正在迅速改变我们的世界，从医疗到交通，从教育到娱乐，AI技术正在各个领域展现出巨大的潜力。</p>
				<p style="font-size: 18px; line-height: 1.8; color: #333; margin-bottom: 20px;">随着机器学习算法的不断进步，人工智能系统变得越来越智能和复杂。未来，AI将成为推动社会创新和发展的关键力量。</p>
				<p style="font-size: 18px; line-height: 1.8; color: #333; margin-bottom: 20px;">技术的进步不仅仅是算法的改进，更是对人类思维方式和社会结构的深刻变革。我们正站在一个技术革命的前沿，见证着人工智能如何重塑我们的生活和工作方式。</p>
				<p style="font-size: 18px; line-height: 1.8; color: #333; margin-bottom: 20px;">在医疗领域，AI可以帮助医生更早、更准确地诊断疾病；在交通领域，自动驾驶技术正在变得越来越成熟；在教育领域，个性化学习平台可以根据每个学生的需求提供定制化的教育内容。</p>
				<p style="font-size: 18px; line-height: 1.8; color: #333; margin-bottom: 20px;">技术革新的浪潮正在加速，我们需要做好准备，拥抱这个AI驱动的新时代。</p>
			`
		}
	}, 800)
	
	setTimeout(() => {
		comments.value = [
			{
				id: 1,
				username: '虎扑JR0910476578',
				avatar: '/static/logo.png',
				content: '人工智能确实改变了我们的生活方式，期待更多应用场景',
				time_str: '2024-03-27',
				location: '广东',
				likes: 1629,
				isLiked: false,
				showReplies: false,
				replies: [
					{
						id: 101,
						username: '虎扑JR1455939544',
						avatar: '/static/logo.png',
						content: '确实，特别是在医疗领域的应用前景非常广阔',
						time_str: '2024-04-14',
						location: '四川',
						likes: 27,
						isLiked: false,
						hasMoreReplies: true,
						showMoreReplies: false,
						moreReplies: [
							{
								id: 1001,
								username: '科技爱好者',
								avatar: '/static/logo.png',
								content: '医疗AI可以提高诊断准确率，降低医疗成本',
								time_str: '2024-05-31',
								location: '河北',
								likes: 10,
								isLiked: false
							},
							{
								id: 1002,
								username: '虎扑JR0777692087',
								avatar: '/static/logo.png',
								content: '不过AI医疗也面临伦理和隐私方面的挑战',
								time_str: '2024-05-15',
								location: '北京',
								likes: 8,
								isLiked: false,
								replyTo: '科技爱好者'
							}
						]
					}
				]
			},
			{
				id: 2,
				username: '人工智能研究者',
				avatar: '/static/logo.png',
				content: '文章提到的机器学习算法进步是关键，深度学习尤其重要',
				time_str: '2023-04-17',
				location: '上海',
				likes: 589,
				isLiked: false,
				showReplies: false,
				replies: [
					{
						id: 201,
						username: '虎扑JR1793170501',
						avatar: '/static/logo.png',
						content: '大语言模型的出现是近年来最重要的突破之一',
						time_str: '2023-12-08',
						location: '湖南',
						likes: 118,
						isLiked: false,
						hasMoreReplies: true,
						showMoreReplies: false,
						moreReplies: [
							{
								id: 2001,
								username: '数据科学家',
								avatar: '/static/logo.png',
								content: 'GPT系列模型改变了自然语言处理领域',
								time_str: '2024-01-05',
								location: '江苏',
								likes: 38,
								isLiked: false
							},
							{
								id: 2002,
								username: '机器学习爱好者',
								avatar: '/static/logo.png',
								content: '确实，大模型让AI应用更加实用化',
								time_str: '2024-01-10',
								location: '浙江',
								likes: 25,
								isLiked: false,
								replyTo: '数据科学家'
							}
						]
					}
				]
			}
		]
	}, 1000)
}

// 页面加载
onLoad((options) => {
	const id = options && options.id ? options.id : 'default'
	fetchArticleData(id)
	
	// 设置导航栏标题
	uni.setNavigationBarTitle({
		title: '文章详情'
	})
})
</script>

<style lang="scss">
$primary-color: #336699;
$text-color: #333333;
$light-text: #999999;
$bg-color: #f5f5f5;
$border-color: #eeeeee;

.page-container {
	background-color: $bg-color;
	min-height: 100vh;
	padding-bottom: 120rpx;
	
	&.no-scroll {
		overflow: hidden;
		height: 100vh;
		position: fixed;
		width: 100%;
	}
}

.article-section {
	background-color: #fff;
	margin-bottom: 20rpx;
	padding: 30rpx;
}

.article-header {
	margin-bottom: 30rpx;
}

.article-title {
	font-size: 40rpx;
	font-weight: bold;
	color: $text-color;
	line-height: 1.4;
	margin-bottom: 20rpx;
}

.article-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.article-source {
	display: flex;
	align-items: center;
}

.source-icon {
	width: 40rpx;
	height: 40rpx;
	border-radius: 50%;
	margin-right: 10rpx;
}

.source-name {
	font-size: 28rpx;
	color: $text-color;
}

.article-time {
	font-size: 24rpx;
	color: $light-text;
}

.article-content {
	font-size: 32rpx;
	line-height: 1.8;
	color: $text-color;
}
</style>
